<template>
    <div class="p-2">
        <!-- <transition :enter-active-class="proxy?.animate.searchAnimate.enter"
            :leave-active-class="proxy?.animate.searchAnimate.leave">
            <el-tabs v-model="activeTab">
                <searchrevealing>
                    <el-tab-pane label="产品类目管理" name="category">
                        <el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="75px"
                            @submit.prevent class="query_form">
                            <el-form-item label="类目名称" prop="categoryName">
                                <el-input style="width: 220px" v-model="queryParams.categoryName" placeholder="请输入"
                                    maxlength="20" @keyup.enter="handleQuery"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="handleQuery" :loading="queryLoading">查询</el-button>
                                <el-button @click="resetQuery" :loading="queryLoading">重置</el-button>
                            </el-form-item>
                        </el-form>
                    </el-tab-pane>
                </searchrevealing>
            </el-tabs>
        </transition> -->
        <el-card shadow="never">
            <template #header>
                <el-row :gutter="10" class="mb8">
                    <el-col :span="1.5">
                        <el-button type="primary" @click="addFirstCategory('first')">新增一级类目</el-button>
                    </el-col>
                    <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"
                        v-model:search="searchFlag"></right-toolbar>
                </el-row>
            </template>
            <div class="content">
                <div class="content_header">
                    <div class="content_header_title" v-for="(item, index) in headerList" :key="index">{{ item }}</div>
                </div>
                <div class="content_category">
                    <div class="content_header_child" v-loading="firstLoading">
                        <div class="content_header_row" v-for="(item, index) in firstChildList" :key="index"
                            v-if="firstChildList.length > 0" @click="firstClcik(item, index)"
                            :style="{ backgroundColor: firstIndex == index ? '#C0E7FF' : '#fff', color: firstIndex == index ? '#0094FF' : '#1A1B1C' }">
                            <div class="name">{{ item.categoryName }}</div>
                            <div class="operate">
                                <el-tooltip effect="dark" content="新增子集" placement="bottom">
                                    <img :src="icon_xinzengziji" alt="" @click="addFirstCategory('second', item)">
                                </el-tooltip>
                                <el-tooltip effect="dark" content="编辑" placement="bottom">
                                    <img :src="icon_bianji" alt="" @click="editFirstCategory('first', item)">
                                </el-tooltip>
                                <el-tooltip effect="dark" :content="!item.categoryStatus ? '禁用' : '启用'"
                                    placement="bottom">
                                    <img :src="!item.categoryStatus ? icon_jinyong : icon_qiyong" alt=""
                                        @click="enableFlag(item, 'first')">
                                </el-tooltip>
                                <el-tooltip effect="dark" content="删除" placement="bottom">
                                    <img :src="icon_shanchu" alt="" @click="deleteCategory(item, 1)">
                                </el-tooltip>
                            </div>
                        </div>
                        <div class="nothing_div" v-if="firstChildList.length == 0">
                            <img src="@/assets/images/outBound/icon_zanwushuju.png" />
                            <div class="nothing_font">暂无数据</div>
                        </div>
                    </div>
                    <div class="content_header_child" v-loading="secondLoading">
                        <div class="content_header_row" v-for="(item, index) in secondChildList" :key="index"
                            v-if="secondChildList.length > 0" @click="secondClcik(item, index)"
                            :style="{ backgroundColor: secondIndex == index ? '#C0E7FF' : '#fff', color: secondIndex == index ? '#0094FF' : '#1A1B1C' }">
                            <div class="name">{{ item.categoryName }}</div>
                            <div class="operate">
                                <el-tooltip effect="dark" content="新增子集" placement="bottom">
                                    <img :src="icon_xinzengziji" alt="" @click="addFirstCategory('third', item)">
                                </el-tooltip>
                                <el-tooltip effect="dark" content="编辑" placement="bottom">
                                    <img :src="icon_bianji" alt="" @click="editFirstCategory('second', item)">
                                </el-tooltip>
                                <el-tooltip effect="dark" :content="!item.categoryStatus ? '禁用' : '启用'"
                                    placement="bottom">
                                    <img :src="!item.categoryStatus ? icon_jinyong : icon_qiyong" alt=""
                                        @click="enableFlag(item, 'second')">
                                </el-tooltip>
                                <el-tooltip effect="dark" content="删除" placement="bottom">
                                    <img :src="icon_shanchu" alt="" @click="deleteCategory(item, 2)">
                                </el-tooltip>
                            </div>
                        </div>
                        <div class="nothing_div" v-if="secondChildList.length == 0">
                            <img src="@/assets/images/outBound/icon_zanwushuju.png" />
                            <div class="nothing_font">暂无数据</div>
                        </div>
                    </div>
                    <div class="content_header_child" v-loading="thirdLoading">
                        <div class="content_header_row" v-for="(item, index) in fhirdChildList" :key="index"
                            v-if="fhirdChildList.length > 0" @click="thirdClcik(item, index)"
                            :style="{ backgroundColor: thirdIndex == index ? '#C0E7FF' : '#fff', color: thirdIndex == index ? '#0094FF' : '#1A1B1C' }">
                            <div class="name">{{ item.categoryName }}</div>
                            <div class="operate">
                                <el-tooltip effect="dark" content="编辑" placement="bottom">
                                    <img :src="icon_bianji" alt="" @click="editFirstCategory('third', item)">
                                </el-tooltip>
                                <el-tooltip effect="dark" :content="!item.categoryStatus ? '禁用' : '启用'"
                                    placement="bottom">
                                    <img :src="!item.categoryStatus ? icon_jinyong : icon_qiyong" alt=""
                                        @click="enableFlag(item, 'third')">
                                </el-tooltip>
                                <el-tooltip effect="dark" content="删除" placement="bottom">
                                    <img :src="icon_shanchu" alt="" @click="deleteCategory(item, 3)">
                                </el-tooltip>
                            </div>
                        </div>
                        <div class="nothing_div" v-if="fhirdChildList.length == 0">
                            <img src="@/assets/images/outBound/icon_zanwushuju.png" />
                            <div class="nothing_font">暂无数据</div>
                        </div>
                    </div>
                </div>
            </div>
        </el-card>

        <el-dialog v-model="addDialogVisible" title="新增类目" width="500" :before-close="addBeforeClose">
            <el-form ref="addRef" :model="addform" style="width: 100%" :inline="true" :rules="addrules"
                label-width="130px" @submit.prevent>
                <el-row class="hm-row3" :gutter="60">
                    <el-col :span="24">
                        <el-form-item label="类目名称" prop="supplierName">
                            <el-input v-model="addform.supplierName" placeholder="请输入" clearable style="width: 200px;"
                                maxlength="20" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row class="hm-row3" :gutter="60">
                    <el-col :span="24">
                        <el-form-item label="上级类目" prop="superiorCategory">
                            {{ addform.superiorCategory }}
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="addBeforeClose">取消</el-button>
                    <el-button type="primary" @click="handleSave(addRef, 'add')">
                        确定
                    </el-button>
                </div>
            </template>
        </el-dialog>

        <el-dialog v-model="editDialogVisible" title="修改类目" width="500" :before-close="editBeforeClose">
            <el-form ref="editRef" :model="editform" style="width: 100%" :inline="true" :rules="editrules"
                label-width="130px" @submit.prevent>
                <el-row class="hm-row3" :gutter="60">
                    <el-col :span="24">
                        <el-form-item label="类目名称" prop="supplierNames">
                            <el-input v-model="editform.supplierNames" placeholder="请输入" clearable style="width: 200px;"
                                maxlength="20" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row class="hm-row3" :gutter="60">
                    <el-col :span="24">
                        <el-form-item label="上级类目" prop="superiorCategory">
                            {{ editform.superiorCategory }}
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="editBeforeClose">取消</el-button>
                    <el-button type="primary" @click="handleSave(editRef, 'edit')">
                        确定
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>
<script setup name="Contract" lang="ts">
import type { FormInstance } from 'element-plus'
import type { Action } from 'element-plus'
import { getCategoryList, categoryAdd, categoryEdit, enableCategoryId, disableCategoryId, deleteCategoryId } from '@/api/group/productOutbound/index'
import icon_bianji from '@/assets/images/outBound/icon_bianji.png';
import icon_jinyong from '@/assets/images/outBound/icon_jinyong.png';
import icon_qiyong from '@/assets/images/outBound/icon_qiyong.png';
import icon_shanchu from '@/assets/images/outBound/icon_shanchu.png';
import icon_xinzengziji from '@/assets/images/outBound/icon_xinzengziji.png';

const firstLoading = ref(false)
const secondLoading = ref(false)
const thirdLoading = ref(false)

const { proxy } = getCurrentInstance() as ComponentInternalInstance;

const queryFormRef = ref<ElFormInstance>();
const activeTab = ref('category');
const queryParams = ref({
    categoryName: undefined,
})
const queryLoading = ref(false)
const showSearch = ref(true);
const searchFlag = ref(false)
const headerList = ref([
    '一级类目', '二级类目', '三级类目'
])
const firstIndex = ref(0)
const secondIndex = ref(0)
const thirdIndex = ref(0)

const firstChildList = ref<any>([])
const secondChildList = ref<any>([])
const fhirdChildList = ref<any>([])
// 新增
const addDialogVisible = ref(false)
const addRef = ref<FormInstance>()
const addform = ref<{ supplierName?: string, superiorCategory?: string, superiorCategoryId?: string, nums?: string }>({
    supplierName: undefined,
    superiorCategory: undefined,
    superiorCategoryId: undefined,
    nums: undefined
})
const addrules = ref({
    supplierName: [
        { required: true, message: '类目名称不能为空', trigger: 'blur' },
    ]
})
// 修改
const editDialogVisible = ref(false)
const editRef = ref<FormInstance>()
const editform = ref<{ supplierNames?: string, superiorCategory?: string, superiorCategoryId?: string, nums?: string }>({
    supplierNames: undefined,
    superiorCategory: undefined,
    superiorCategoryId: undefined,
    nums: undefined
})
const editrules = ref({
    supplierNames: [
        { required: true, message: '类目名称不能为空', trigger: 'blur' },
    ]
})

/** 搜索按钮操作 */
const handleQuery = () => {
    queryLoading.value = true
    getList();
};
/** 重置按钮操作 */
const resetQuery = () => {
    queryFormRef.value?.resetFields();
    handleQuery();
};
/** 类目列表 */
const getList = async () => {
    try {
        // 一级类目
        await getCategorytList(queryParams.value, 1)
        // 二级类目
        await getCategorytList({ categoryParentId: firstChildList.value[0].categoryId }, 2)
        // 三级类目
        await getCategorytList({ categoryParentId: secondChildList.value[0].categoryId }, 3)
    } catch (e) {
    } finally {
        queryLoading.value = false
    }
}
/** 一级类目选中 */
const firstClcik = async (item: any, index: number) => {
    firstIndex.value = index
    secondIndex.value = 0
    thirdIndex.value = 0
    // 二级类目
    await getCategorytList({ categoryParentId: item.categoryId }, 2)
    try {
        // 三级类目
        await getCategorytList({ categoryParentId: secondChildList.value[0].categoryId }, 3)
    } catch (error) {
        fhirdChildList.value = []
    }
}
/** 二级类目选中 */
const secondClcik = async (item: any, index: number) => {
    secondIndex.value = index
    thirdIndex.value = 0

    // 三级类目
    await getCategorytList({ categoryParentId: item.categoryId }, 3)
}
/** 三级类目选中 */
const thirdClcik = (item: any, index: number) => {
    thirdIndex.value = index
}

/** 删除类目 */
const deleteCategory = (item: any, index: number) => {
    // ElMessageBox.alert('该类目存在商品，请移除该类目下商品再进行', '删除类目', {
    //     confirmButtonText: '确认',
    //     callback: (action: Action) => {
    //         if(action == 'confirm'){
    //             proxy?.$modal.msgSuccess('删除类目成功');
    //         }
    //     },
    // })

    ElMessageBox.alert(index !== 3 ? '确认要删除该类目及其下所有子类目吗？' : '确认要删除该类目吗？', '删除类目', {
        confirmButtonText: '确认',
        callback: async (action: Action) => {
            if (action == 'confirm') {
                // 一级
                if (index == 1) {
                    await deleteCategoryId({ categoryIds: item.categoryId })
                } else if (index == 2) {
                    const ids = firstChildList.value[firstIndex.value].categoryId + ',' + item.categoryId
                    await deleteCategoryId({ categoryIds: ids })
                } else if (index == 3) {
                    const ids = firstChildList.value[firstIndex.value].categoryId + ',' + secondChildList.value[secondIndex.value].categoryId + ',' + item.categoryId
                    await deleteCategoryId({ categoryIds: ids })
                }
                proxy?.$modal.msgSuccess('删除类目成功');
                if (index == 1) {
                    // 一级类目
                    await getCategorytList(queryParams.value, 1)
                    // 二级类目
                    if(firstChildList.value[firstIndex.value]){
                        await getCategorytList({ categoryParentId: firstChildList.value[firstIndex.value].categoryId }, 2)
                    }else{
                        secondChildList.value = []
                    }
                    // 三级类目
                    if(secondChildList.value[secondIndex.value]){
                        await getCategorytList({ categoryParentId: secondChildList.value[secondIndex.value].categoryId }, 3)
                    }else{
                        fhirdChildList.value = []
                    }
                } else if (index == 2) {
                    // 二级类目
                    if(firstChildList.value[firstIndex.value]){
                        await getCategorytList({ categoryParentId: firstChildList.value[firstIndex.value].categoryId }, 2)
                    }else{
                        secondChildList.value = []
                    }
                    // 三级类目
                    if(secondChildList.value[secondIndex.value]){
                        await getCategorytList({ categoryParentId: secondChildList.value[secondIndex.value].categoryId }, 3)
                    }else{
                        fhirdChildList.value = []
                    }
                } else {
                    // 三级类目
                    if(secondChildList.value[secondIndex.value]){
                        await getCategorytList({ categoryParentId: secondChildList.value[secondIndex.value].categoryId }, 3)
                    }else{
                        fhirdChildList.value = []
                    }
                }
            }
        },
    })
}
/** 新增类目 */
const addFirstCategory = (nums: string, item?: any) => {
    addDialogVisible.value = true
    // 一级
    if (nums == 'first') {
        addform.value.superiorCategory = '当前类目为一级类目无上级类目'
        addform.value.superiorCategoryId = ''
    } else {
        addform.value.superiorCategory = item.categoryName
        addform.value.superiorCategoryId = item.categoryId
    }
    addform.value.nums = nums
}
/** 修改类目 */
const editFirstCategory = (nums: string, item: any) => {
    editDialogVisible.value = true
    // 一级
    if (nums == 'first') {
        editform.value.superiorCategory = '当前类目为一级类目无上级类目'
        editform.value.superiorCategoryId = item.categoryId
    } else {
        editform.value.superiorCategory = item.categoryParentName
        editform.value.superiorCategoryId = item.categoryId
    }
    editform.value.supplierNames = item.categoryName
    editform.value.nums = nums
}
/** 新增类目关闭 */
const addBeforeClose = () => {
    addRef.value?.resetFields()
    addDialogVisible.value = false
}
/** 修改类目关闭 */
const editBeforeClose = () => {
    editRef.value?.resetFields()
    editDialogVisible.value = false
}
/** 修改新增提交 */
const handleSave = async (formEl: FormInstance | undefined, type: string) => {
    if (!formEl) return
    await formEl.validate(async (valid, fields) => {
        if (valid) {
            // 新增
            if (type == 'add') {
                await categoryAdd({
                    // 排序
                    categoryOrder: '',
                    // 上级id
                    categoryParentId: addform.value.superiorCategoryId,
                    // 类目名字
                    categoryName: addform.value.supplierName
                })
                proxy?.$modal.msgSuccess('新增成功')
                addDialogVisible.value = false
                if (addform.value.nums == 'first') {
                    // 一级类目
                    await getCategorytList(queryParams.value, 1)
                } else if (addform.value.nums == 'second') {
                    // 二级类目
                    await getCategorytList({ categoryParentId: addform.value.superiorCategoryId }, 2)
                } else {
                    // 三级类目
                    await getCategorytList({ categoryParentId: addform.value.superiorCategoryId }, 3)
                }
            } else {
                await categoryEdit({
                    // 排序
                    categoryOrder: '',
                    // 上级id
                    categoryId: editform.value.superiorCategoryId,
                    // 类目名字
                    categoryName: editform.value.supplierNames
                })
                proxy?.$modal.msgSuccess('修改成功')
                editDialogVisible.value = false

                if (editform.value.nums == 'first') {
                    // 一级类目
                    await getCategorytList(queryParams.value, 1)
                } else if (editform.value.nums == 'second') {
                    // 二级类目
                    await getCategorytList({ categoryParentId: firstChildList.value[firstIndex.value].categoryId }, 2)
                } else {
                    // 三级类目
                    await getCategorytList({ categoryParentId: secondChildList.value[secondIndex.value].categoryId }, 3)
                }
            }
            formEl.resetFields()
        } else {
            console.log('error submit!', fields)
        }
    })
}

/** 禁用启用 */
const enableFlag = async (item: any, nums: string) => {
    // item.categoryStatus = !item.categoryStatus
    if (item.categoryStatus == 0) {
        await disableCategoryId(item.categoryId)
    } else {
        await enableCategoryId(item.categoryId)
    }
    if (nums == 'first') {
        // 一级类目
        await getCategorytList(queryParams.value, 1)
    } else if (nums == 'second') {
        // 二级类目
        await getCategorytList({ categoryParentId: firstChildList.value[firstIndex.value].categoryId }, 2)
    } else {
        // 三级类目
        await getCategorytList({ categoryParentId: secondChildList.value[secondIndex.value].categoryId }, 3)

    }
}
onMounted(() => {
    getList()
})

const getCategorytList = async (params: any, nums: number) => {
    if (nums == 1) {
        firstLoading.value = true
        const res = await getCategoryList(params)
        firstChildList.value = res.data
        firstLoading.value = false
    } else if (nums == 2) {
        secondLoading.value = true
        const res = await getCategoryList(params)
        secondChildList.value = res.data
        secondLoading.value = false
    } else {
        thirdLoading.value = true
        const res = await getCategoryList(params)
        fhirdChildList.value = res.data
        thirdLoading.value = false
    }
}
</script>

<style lang="scss" scoped>
.query_form {
    display: flex !important;
    justify-content: space-between !important;
}

.content {
    .content_header {
        height: 48px;
        width: 100%;
        background: #F3F3F7;
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;

        .content_header_title {
            width: calc(100% / 3);
            height: 100%;
            line-height: 48px;
            color: #1A1B1C;
            font-size: 14px;
            font-weight: 500;
            box-sizing: border-box;
            padding: 0 10px;
        }

    }

    .content_category {
        height: 500px;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .content_header_child {
            width: calc(100% / 3);
            height: 500px;
            overflow-y: scroll;

            .nothing_div {
                width: 100%;
                margin: auto;
                text-align: center;
                margin-top: 160px;
                font-weight: 400;
                font-size: 12px;
                color: #B8BECA;
                line-height: 12px;
                flex-wrap: wrap;

                img {
                    width: 160px;
                    height: 160px;
                }
            }

            .content_header_row {
                box-sizing: border-box;
                padding: 0 10px;
                height: 44px;
                width: 100%;
                border-left: 1px solid #F3F3F7;
                border-bottom: 1px solid #F3F3F7;
                line-height: 44px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                cursor: pointer;

                &:hover {
                    background-color: #EBF4FD !important;
                }

                .operate {
                    img {
                        width: 14px;
                        height: 14px;
                        margin-left: 15px;
                        cursor: pointer;
                    }
                }
            }
        }
    }
}
</style>